<template>
  <div class="">
    <el-button
      :loading="news.pending.value"
      type="primary"
      size="default"
      @click="news.refresh()"
      >refresh</el-button
    >

    <ul v-loading="news.pending.value">
      <li v-for="(item, index) in news.data.value" :key="index" class="">
        <nuxt-link
          :to="{
            name: 'news-id',
            params: { id: item.id },
          }"
          custom
          v-slot="{ navigate, href }"
        >
          <el-link type="primary" :href="href" @click="navigate">{{
            item.title
          }}</el-link>
        </nuxt-link>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
const news = useAsyncMockData(
  '/api/news',
  {},
  {
    default: () => [],
    // immediate: false,
    server: false,
  },
);
console.log(news.data.value);
</script>
